<template>
    <div class="type">
        <div class="title">
            <p>职务列表</p>
            <el-button type="primary" size="small" @click="add">添加职务</el-button>
        </div>
        <div class="list">
            <el-table :data="stations" stripe style="width: 100%">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="name" label="职务名" width="140" />
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" size="medium">修改</el-button>
                        <el-button @click="del(scope.row.id)" type="text" size="medium" style="color: #e47470;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { mapState,mapActions } from 'vuex';
    export default {
        name: 'WebTeacherStation',
        computed: {
            ...mapState('Teacher',['stations'])
        },
        methods: {
            ...mapActions('Teacher',['getStations','addStation','editStation','delStation']),
            add(){
                this.$prompt('请输入职务名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.addStation(value);
                })
            },
            edit({id,name}){
                this.$prompt('请输入职务名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: name
                }).then(({ value }) => {
                    this.editStation({id,name: value})
                })
            },
            del(id){
                this.$confirm('此操作将永久删除此职务, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delStation(id);
                })
            }
        },
        mounted(){
            this.getStations();
        }
    };
</script>

<style lang="less" scoped>
    @import "asle/index.less";
    .type {
        .size(400px,100%);
        .title {
            .size(100%,50px);
            .df();
            .f_jc(space-between);
            .f_ai();
        }
        .list {
            .size(100%,calc(100% - 50px));
        }
    }
</style>